// 课程简介
import React, { Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Platform
}from 'react-native'
import HTML from 'react-native-render-html';
const Dimensions = require('Dimensions');
const { width: deviceWidth} = Dimensions.get('window');
import {setSpText,setHW} from './ScreenUtil'
export default class CourseIntroduction extends Component {
    constructor(props) {
        super(props);
    }
    // 知识点
    Knowledge(list){
        if(list&&list.length){
           return list.map((tag,i)=>{
                return(
                    <View key={i} style={styles.knowageItemRadius}>
                        <Text style={styles.tag}>{tag.TAG_NAME}</Text> 
                    </View>
                )
            })
        }
    }
    render() {
        return (
            <View>
                <View style={styles.rowStyle}>
                    <View style={[styles.courseIntro,styles.flexRow]}>
                        <View style={styles.lineBorder}></View>
                        <View style={styles.rightCon}>
                            <Text style={styles.title}>课程描述</Text>
                            {this.COURSE_DESC(this.props.dataList.COURSE_DESC)}
                        </View>
                    </View>
                    <View style={[styles.Knowledge,styles.flexRow]}>
                        <View style={styles.lineBorder}></View>
                        <View style={styles.rightCon}>
                            <Text style={styles.title}>相关知识点</Text>
                            <View style={styles.tagBox}>
                            {this.Knowledge(this.props.dataList.LISTTAGS)}
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        );
    }
    // 课程描述
    COURSE_DESC(htmlContent){
        htmlContent = htmlContent.replace(/block/g,'flex');
        if(Platform.OS==='ios'){
            return(
                <View style={styles.introBox}>
                    <HTML html={htmlContent} renderers={this.renderersHandle()} 
                    imageInitialDimensions={deviceWidth - setHW(80)} />
                </View>
            )
        }else{
            return(
                <View style={styles.introBox}>
                    <HTML html={htmlContent} imagesMaxWidth={deviceWidth - setHW(80)} />
                </View>
            )
        }
    }
    renderersHandle() {
        return {
            img: (htmlAttribs) => {
                if(htmlAttribs['data-w']){
                    if(htmlAttribs['data-w']>=deviceWidth - setHW(80)){//大图时 按照屏幕宽度进行等比缩放
                        return <Image style={{width: (deviceWidth - setHW(80)), height: (deviceWidth - setHW(80)) / htmlAttribs['data-ratio']}} 
                        source={{uri: htmlAttribs.src}} />
                    }else{
                        return <Image style={{width: htmlAttribs['data-w'], height: htmlAttribs['data-h']}} 
                        source={{uri: htmlAttribs.src}} />
                    }
                }else{
                    return <Image style={{width: deviceWidth - setHW(80), height: setHW(100)}} 
                    source={{uri: htmlAttribs.src}} />
                }
            }
        }
    }
}
const styles = StyleSheet.create({
    introBox:{
        marginTop:setHW(20)
    },
    flexRow:{
        flexDirection:'row',
    },
    rightCon:{
        width: deviceWidth - setHW(68),
    },
    // 竖线
    lineBorder: {
        width: setHW(6),
        height: setHW(24),
        backgroundColor: '#FF9920',
        borderRadius: setHW(10),
        marginRight:setHW(16),
        marginTop:setHW(4),
    },
    rowStyle:{
        padding:setHW(20),
        paddingTop:setHW(26),
        backgroundColor:'#fff',
        paddingBottom:setHW(16),
    },
    title:{
        color:'#333',
        fontSize:setSpText(28),
    },
    intro:{
        color:'#333',
        fontSize:setSpText(24),
        lineHeight:setHW(40),
        marginTop:setHW(12),
        paddingLeft:setHW(4),
    },
    courseIntro:{
        marginBottom:setHW(50),
        marginTop:setHW(10),
    },
    Knowledge:{
        marginBottom:setHW(40),
    },
    tagBox:{
        flexDirection: 'row',
        flexWrap:'wrap',
        marginTop:setHW(20),
    },
    knowageItemRadius:{
        padding: setHW(8),
        height:setHW(40),
        backgroundColor: '#FFF4E8',
        borderRadius: setHW(8),
        marginRight: setHW(10),
        marginTop: setHW(10),
        justifyContent:'center',
        alignItems:'center', 
    },
    tag:{
        color:'#FF8A00',
        fontSize:setSpText(25),
    },
    box:{
        flexDirection: 'row',
        justifyContent:'flex-start',   
    }
});